<template>
  <div>
    <h1>医院订单管理</h1>
    <div>
      <!-- 条件查询 -->
      <div >
        <el-input  placeholder="请输入订单/床位编号" v-model="inOnumOrBnum" style="width: 250px;">
        </el-input>
        <el-button  type="primary" icon="el-icon-search" style="width: 150px" @click="getByNums">查询</el-button>
        <el-select v-model="value" placeholder="请选择科室">
          <el-option
            v-for="item in departOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-button  type="primary" icon="el-icon-search" style="width: 150px" @click="getByDepartOrders">查询</el-button>
        <el-button  type="primary" icon="el-icon-search" style="width: 100px" @click="clean">重置</el-button>
      </div>
      <!-- 时间选择 -->
      <div class="block"  style="border: #6ab7fe solid 0px;">
      <span class="demonstration">选择时间日期</span>
        <el-date-picker
          v-model="value2"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right">
        </el-date-picker>
  </div>

      <div
        style="
          background-color: #e4f2ff;
          border: 1px solid #6ab7fe;
          margin: 0px auto;
          height: 40px;
          line-height: 40px;
          width: 100%;
        "
      >
        <i
          class="el-icon-message-solid"
          style="color: #6ab7fe; line-height: 40px"
        >
        </i>
        <label style="font-size: 14px">
          订单总数：{{ OrderList.total }}
        </label>
      </div>
    </div>
    <el-table
      ref="multipleTable"
      :data="OrderList.list"
      tooltip-effect="dark"
      style="width: 100%; margin: 0px auto"
      @selection-change="handleSelectionChange"
    >
    <el-table-column prop="onum" label="订单编号" width="120">
    </el-table-column>
    <el-table-column
        prop="tbDepartment.dname"
        label="科室名"
        width="auto"
      ></el-table-column>
      <el-table-column
        prop="tbBed.bnum"
        label="床位编号"
        width="auto"
      ></el-table-column>
      <el-table-column
        prop="orderTime"
        label="下单时间"
        width="auto"
      ></el-table-column>
      <el-table-column
        prop="actualpay"
        label="支付金额"
        width="auto"
      >
    </el-table-column>
      <el-table-column
        prop="tbCustomer.cname"
        label="下单顾客"
        width="auto"
      ></el-table-column>
      <el-table-column
        prop="orderstatus"
        label="订单状态"
        width="auto"
      >
      <template slot-scope="scope">
        <label v-if="scope.row.orderstatus==0">进行中</label>
        <label v-if="scope.row.orderstatus==1">待支付</label>
        <label v-if="scope.row.orderstatus==2">已支付</label>
      </template>
    </el-table-column>
      <el-table-column label="操作" width="auto" align="center">
        <template slot-scope="scope">
          <el-button
            size="medium "
            type="warning" 
            plain
            @click="updateStatus(scope.row)"
            >修改订单状态</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="OrderList.pageNum"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="OrderList.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="OrderList.total"
    >
    </el-pagination>
  </div>
</template>

<script>
import { getOrder,getByNum,getDepartmentByHid,getByDepartOrder,updateStatu } from "@/api/hospitalOrder.js";
export default {
  data() {
    return {
      value: '',
      departOptions:[{
        value: '',
        label: ''
      }
    ],
      inOnumOrBnum:"",
      pageInfo: {
        pageNum: 1,
        pageSize: 5,
      },
      OrderList: [],
    };
  },
  mounted() {
    this.getOrders();
    this.getDepartmentByHids();
  },
  methods: {
    clean(){
      this.inOnumOrBnum=""
      this.value=""
      this.getOrders();

    },
    handleSizeChange(val) {
      this.pageInfo.pageSize = val;
      this.pageInfo.pageNum = 1;
      this.getOrders();
    },
    handleCurrentChange(val) {
      this.pageInfo.pageNum = val;
      this.getOrders();
    },
    getOrders() {
      getOrder({
        pageNum: this.pageInfo.pageNum,
        pageSize: this.pageInfo.pageSize,
      }).then((res) => {
        if (res.data.code == 200) {
          this.OrderList = res.data.data;
        }
      });
    },
    getByNums(){
      if(this.inOnumOrBnum==""){
          alert("请输入要查询的内容")
      }else{
        getByNum({
          onumOrBnum: this.inOnumOrBnum,
          pageNum: this.pageInfo.pageNum,
          pageSize: this.pageInfo.pageSize,
        }).then(res=>{
          if(res.data.code==200){
            this.OrderList= res.data.data
          }
      })
      }
      
    },
    getDepartmentByHids(){
      getDepartmentByHid().then(res=>{
        if(res.data.code==200){
          this.departOptions= res.data.data
          for(var i = 0;i<this.departOptions.length;i++){
            this.departOptions[i].value= this.departOptions[i].did
            this.departOptions[i].label= this.departOptions[i].dname
          }
        }
      })

    },
    getByDepartOrders(){
      getByDepartOrder({
        did : this.value,
        pageNum: this.pageInfo.pageNum,
        pageSize: this.pageInfo.pageSize,
      }).then(res=>{
        if(res.data.code==200){
          this.OrderList= res.data.data
        }
      })

    },
    updateStatus(row){
      updateStatu(row.oid).then(res=>{
        if(res.data.code==200){
          this.$message({
              type:"success",
              message:"状态修改成功"
          })
          this.getOrders();
        }
      })
    }
  },
};
</script>

<style>
</style>